<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>
			The Cobra Snake - ADMIN
		</title>
		<style type="text/css">
			body 
			{ 
				font-family:Verdana, Geneva, sans-serif; font-size:13px; color:#ff0000;
				background-color: black;
			} 
			#mainContainer
			{
				text-align: center;
			}
			
			#headerContainer 
			{ 
				position: fixed; top:0px; left:0px; background-color: black; height:auto; width:100%; text-align: center;
			}
			#login_form
			{
				margin-top: 300px;
				position: relative;
			}
			.reg
			{
				text-align: center;
			}
			.oyvey
			{
				position: absolute;
				width: 900px;
				height:auto;
				left:50%;
				margin-left: -375px;
			}
			#enterBtn
			{
				margin-top: 130px;	
			}
			
			.form_inputs
			{  
		        width:320px;  
		        padding:8px;  
		        outline:none;  
		        height:18px;
		        font-size: 16px;
		        font-weight: bold;
				border: solid 3px #ff0000; 
		    }
		    
			#headerMenu		    
		    {
		    	height: 100px;
		    	width: 790px;
		    	background:  url('../img/headerBG.jpg') no-repeat 0 center;
		    	
		    	position: relative;
		    	left: 50%;
		    	margin-left: -375px;
		    	margin-top: 30px;
		    }
		    #theCobraSnakeLogo
		    {
		    	margin-top: 60px;
		    }
		    .navButtons, #browserLogoList
		    {
		    	list-style: none;
		    	margin: 0;
		    	padding: 0;
		    }
		    
		    .navButtons li
		    {
		    	width: 166px;
		    	height: 100px;
		    	float: left;
		    	
		    	/* border: 1px solid #ff0000; */
		    }
		    #browserLogoList li
		    {
		    	width: 100px;
		    	height: 100px;
		    	float: left;
		    }
		    #browserLogos
		    {
		    	display: block;
		    	width: 300px;
		    	height: auto;
		    	text-align: center;
		    	position: absolute;
		    	top:500px;
		    	left: 50%;
		    	margin-left: -150px;
		    }
		   	 .navButtons li img
		    {
		    	margin-top: 40px;
		    } 
		    
		    .navButtons li:nth-child(3) 
		    {
		    	width: 144px;
			}
			
			
		    .navButtons li:nth-child(4) 
		    {
		    	width: 144px;
		    	text-align: center;
			}
			
			.navButtons li:nth-child(4) img:nth-child(1)
		    {
		    	margin-top: 20px;
			}
			.navButtons li:nth-child(4) img:nth-child(2)
		    {
		    	margin-top: 0px;
			}
			
			.search_input
		    {
		    	margin-top: 38px;
		    	width:85px;  
		        padding:8px;  
		        outline:none;  
		        height:18px;
		        font-size: 16px;
		        font-weight: bold;
				border: solid 3px #ff0000; 	
		    }
			.buttonN, .button
			{
				font-size: 24px;
				font-weight: bold;
				cursor: pointer;
			}
			.buttonN
			{
				display: inline;
			}
			.perm
			{
				text-align: center;
			}
			.perm div
			{
				width: 176px;
				position: relative;
				left: 50%;
				margin-left: -100px;
				margin-top: 30px;
			}
			.cobraButton
			{
				background: url('../img/genericButtonComplete.png') no-repeat 0 0;
				width: 173px;
				height: 58px;
				text-align: center;
				padding: 12px;
				display: block;
			}
			
		    
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="../js/functions.js"></script>
	</head>
	<body>
	<div id="mainContainer">
		
		<div id="login_form">
		
			<form action="" class="reg">
			<table class="oyvey">
		    	<tr>
		        	<td align="center" width="273" height="50"><label for="email" ><img src="../pngfont.php?bgcolor=000000&color=ff0000&size=12&font=fonts/TCS2.ttf&text=EMAIL " alt="THE COBRA SNAKE" border="0"></label></td>
		        	<td align="left" width="720"><input class="form_inputs" type="text" name="email" id="email"></input><label class="error" for="email" id="email_error">This field is required.</label></td>
		        </tr>
		    	<tr align="left">
		        	<td align="center" width="273" height="50"><label for="password" ><img src="../pngfont.php?bgcolor=000000&color=ff0000&size=12&font=fonts/TCS2.ttf&text=PASSWORD " alt="THE COBRA SNAKE" border="0"></label></td>
		        	<td align="left" width="720"><input class="form_inputs" type="password" name="password" id="password"></input><label class="error" for="password" id="password_error">This field is required.</label></td>
		        </tr>
		        <tr align="left">
		        	<td align="center" width="273"><div id='message'></div></td>
		        	<td align="left" width="720" height="90"><span class="cobraButton button"><img src="../pngfont.php?bgcolor=ffa1a2&color=000&size=13&font=fonts/TCS2.ttf&text=LOGIN " alt="LOGIN TO THE COBRA SNAKE" border="0" /></span></td>
		        </tr>
		    </table>
		    
				
			</form>
			<form action="" class="perm" >
				<label for="passwordN" ><img src="../pngfont.php?bgcolor=000000&color=ff0000&size=12&font=fonts/TCS2.ttf&text=NEW PASSWORD " alt="THE COBRA SNAKE" border="0"></label>  
				<input class="form_inputs" type="password" name="passwordN" id="passwordN"></input>  
		    	<label class="error" for="passwordN" id="passwordN_error">This field is required.</label>
		    	<div><span class="cobraButton"><img src="../pngfont.php?bgcolor=ffa1a2&color=000&size=13&font=fonts/TCS2.ttf&text=LOGIN " alt="LOGIN TO THE COBRA SNAKE" border="0"  class="buttonN" /></span></div>
				
			</form>
		</div>
		<div id="browserLogos">
			<img src="../pngfont.php?bgcolor=000000&color=999&size=9&font=fonts/TCS2.ttf&text=PLEASE USE ONE " alt="THE COBRA SNAKE" border="0">
			<img src="../pngfont.php?bgcolor=000000&color=999&size=9&font=fonts/TCS2.ttf&text=OF THESE BROWSERS " alt="THE COBRA SNAKE" border="0">
			<ul id="browserLogoList">
				<li><a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank"><img src="../img/firefox.jpg" alt="FIREFOX" border="0"></a></li>
				<li><a href="http://www.apple.com/safari/download/" target="_blank"><img src="../img/safari.jpg" alt="SAFARI" border="0"></a></li>
				<li><a href="http://www.google.com/chrome" target="_blank"><img src="../img/chrome.jpg" alt="CHROME" border="0"></a></li>
			</ul>
		</div>
	</div>
	<div id="headerContainer">
			<a href="http://thecobrasnake.com/" target="_self"><img id="theCobraSnakeLogo" src="../pngfont.php?bgcolor=000000&color=fffb00&size=28&font=fonts/TCS2.ttf&text=THE COBRA SNAKE " alt="THE COBRA SNAKE" border="0"></a>
			<div id="headerMenu">
				<ul class="navButtons">
					<li><a href="http://thecobrasnake.com/" target="_self"><img src="../pngfont.php?bgcolor=f6f9fd&color=ff0000&size=11&font=fonts/TCS2.ttf&text=PHOTOS " alt="THE COBRA SNAKE" border="0"></a></li>
					<li><a href="http://shop.thecobrasnake.com/collections/cool-stuff" target="_self"><img src="../pngfont.php?bgcolor=f6f9fd&color=7dfc7d&size=11&font=fonts/TCS2.ttf&text=STORE " alt="THE COBRA SNAKE" border="0"></a></li>
					<li><a href="#" target="_self"><img class="search_label" src="../pngfont.php?bgcolor=f6f9fd&color=c0c0c0&size=11&font=fonts/TCS2.ttf&text=SEARCH " alt="THE COBRA SNAKE" border="0"></a><input type="text" class="search_input"></input></li>
					<!--
<li><a href="#" target="_self"><img src="../pngfont.php?bgcolor=f6f9fd&color=7dc9ff&size=11&font=fonts/TCS2.ttf&text=MANAGE " alt="THE COBRA SNAKE" border="0"><img src="../pngfont.php?bgcolor=f6f9fd&color=7dc9ff&size=11&font=fonts/TCS2.ttf&text=LOGINS " alt="THE COBRA SNAKE" border="0"></a></li>
					<li><a href="#" target="_self"><img src="../pngfont.php?bgcolor=f6f9fd&color=ffc77a&size=11&font=fonts/TCS2.ttf&text=LOG OUT " alt="THE COBRA SNAKE" border="0"></a></li>
-->
				</ul>
			</div>
		</div>
	<script type="text/javascript">
		var user_email;
		$(function() 
		{  
						
			$('.error').hide();  
			$('.search_input').hide();
			$('.search_input').val("");
			
			
			$('.perm').hide();
			
			$('.search_label').click( function(){
				$('.search_label').hide();
				$('.search_input').show();
			});
			$('.search_input').change(function(){
				window.location="../gallery.php?search="+$(this).val();
			});
			
			
			$(".button").click(function() 
			{  
				// validate and process form here  
				$('.error').hide();  
				$('#message').text("");
				
				var email = user_email = $("input#email").val();
				if (email == "") 
				{  
				  $("label#email_error").show();  
				  $("input#email").focus();  
				  return false;  
				}
				
				var pass = $("input#password").val();
				if (pass == "") 
				{  
				  $("label#password_error").show();  
				  $("input#password").focus();  
				  return false;  
				}
				
				webservice.photos.login( email, pass, function( loginStatus )
				{
				
					switch(loginStatus)
					{
						case "TRUE":
							window.location = "./";
						break;
						case "NONE":
						case "FALSE":
							$("input#password").val('');
							$('#message').text("BAD LOGIN.");
							setTimeout(function() { $('#message').fadeOut(); }, 3000);
						break;
						case "NEW":
							$('.perm').show();
							$('.error').hide(); 
							$('.reg').hide(); 
						break;
					}
					
				});
				
				
					
				return false; 
			
			}); 
			
			$(".buttonN").click(function() 
			{ 
			
				var pass = $("input#passwordN").val();
				if (pass == "") 
				{  
				  $("label#passwordN_error").show();  
				  $("input#passwordN").focus();  
				  return false;  
				}
				
				webservice.photos.setPermanentPassword( user_email, pass, function( )
				{
					window.location = "./";
				});
				return false; 
			
			}); 
	
		   
		});
		
	</script>

	</body>

</html>